﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery图片左右滚动 原创</title>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/super_slider.js" type="text/javascript"></script>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			html,body{font: 12px/24px "微软雅黑";}
			.box{
				height: 100px;
				position: relative;
				display: inline-block;
				margin: 200px;
			}
			#roll{
				width: 2000px
			}
			#roll dd{
				width: 119px;
				height: 119px;
				border-radius: 50%;
				margin-right: 70px;
				float: left;
				box-sizing: border-box;
				margin-top: 5px;
			}
		
			.ni{
				height: 150px;
			}
			#roll dd img{
				max-width: 100%;
				border: 1px solid #eee;
				border-radius: 50%;
				-webkit-filter: grayscale(100%);
				transition: all 0.5s ease-out 0s;
				animation-duration: 1.1s;
			}
			#roll dd:hover img {
    		filter: none;
    		border: 1px solid #f8bb43;
    		margin-top: -5px;
		}
			.box span{position: absolute;bottom: 20%; left:-60px; display: inline-block;text-align: center;cursor: pointer;z-index: 90;color: #fff;}
			.box .next{right: -100px; left:1300px;}
			.prev{
				background: url(../img/h-left.png) no-repeat;
				width: 36px;
				height: 36px;
				margin-top: -18px;
				transition: all 0.5s ease-out 0s;
			}
			.next{
				background: url(../img/h-right.png) no-repeat;
				width: 36px;
				height: 36px;
				margin-top: -18px;
				transition: all 0.5s ease-out 0s;
				left:-30px
			}
			.prev:hover{
				background: url(../img/h-left2.png) no-repeat;
			}
			.next:hover{
				background: url(../img/h-right2.png) no-repeat;
			}
		</style>
	</head>
	
	<body>
		<div class="box">
			<span class="prev"></span>
			<div class="ni">
			<dl id="roll">
				<dd><img src="../img/h1.jpg"/></dd>
				<dd><img src="../img/h2.jpg"/></dd>
				<dd><img src="../img/h3.jpg"/></dd>
				<dd><img src="../img/h4.jpg"/></dd>
				<dd><img src="../img/h5.jpg"/></dd>
				<dd><img src="../img/h6.jpg"/></dd>
				<dd><img src="../img/h7.jpg"/></dd>
				<dd><img src="../img/h8.jpg"/></dd>
				<dd><img src="../img/h9.jpg"/></dd>
				<dd><img src="../img/h10.jpg"/></dd>
			</dl>
			</div>
			<span class="next"></span>
		</div>	
		<script>
			$(".box").superSlider({
				prevBtn: 	 ".prev",//左按钮
				nextBtn: 	 ".next",//右按钮
				listCont:    "#roll",//滚动列表外层
				scrollWhere: "prev",//自动滚动方向next
				delayTime: 	 1000,//自动轮播时间间隔
				speed: 		 300,//滚动速度
				amount: 	 1,//单次滚动数量
				showNum: 	 6,//显示数量
				autoPlay: 	 true//自动播放
			});
		</script>
	</body>
</html>
